<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>
<s:set var="user_info" value="%{#session.USER_INFO}" />
<s:if test="%{#user_info == null}"><jsp:forward page="login.jsp"></jsp:forward></s:if>
<html>
<head>
<title>EPCS Calendar</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/ace.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/jquery.tagsinput.css" rel="stylesheet" />
<link href="css/trung-style.css" rel="stylesheet" media="screen">
<link href='css/cupertino/jquery-ui.min.css' rel='stylesheet' />
<link href="css/daterangepicker-bs3.css" rel="stylesheet" type="text/css" media="all"/>

<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ace.min.js"></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src="http://localhost:8081/socket.io/socket.io.js"></script>
</head>
<body>
<div class="index">
		<!--header -->
		<tag:HeaderTag username="${user_info.fullname}">
			<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
				<ul class="breadcrumb" style="margin: 8px;">
					<li><i class="icon-home home-icon"></i><a href="./Index.do">Trang
							chủ</a></li>
					<li class="active">Tất cả thông báo</li>
				</ul>
				<!-- .breadcrumb -->
			</div>
		</tag:HeaderTag>
		<!--end header -->

		<!-- main body -->
	<tag:SideBarTag active_area=""></tag:SideBarTag>

		<div class="main-content">
			<div class="page-header">
				<h1>Thông báo của bạn</h1>
			</div>

			<div class="row">
                <!-- left column -->
                <div class="col-md-8 boxContent" id="scrollArea">
               <s:set var="Notification_List"	value="%{#request.NOTIFICATION_LIST}" />
               <s:set var="Title_List"	value="%{#request.TITLE_LIST}" />
               <s:set var="is_null"	value="%{#request.IS_NULL}" />
               <s:if test="%{#is_null == 'true'}">
               	Bạn chưa có thông báo nào
               </s:if>
               <s:else>
               	<s:iterator var="Notification_Item" value="%{#Notification_List}" status="counter">
               <s:iterator var="Title_Item" value="%{#Title_List}" status="counter1">
               <s:if test="#counter.index == #counter1.index">
               	 <s:if test="%{#Notification_Item.status == 2}">
              	 	<div class=" panel panel-warning" style="background-color: #FFF8DA">	
              	 </s:if>
	              <s:else>
	                  <div class=" panel panel-warning" style="background-color:#C6E2FF">
	              </s:else> 							
					<div class="row" style="padding: 5px !important;">
						<div class="col-md-2">
							<span class='avatar' style='float: left; margin-right: 10px;'> 
							<s:if test="%{#Notification_Item.typeOfNotification == 'timmer'}">
								<img src='./img/timerIcon.png'>
							</s:if>
							<s:elseif test="%{#Notification_Item.typeOfNotification == 'comment'}">
								<img src='./img/commentIcon.png'>
							</s:elseif>
							<s:elseif test="%{#Notification_Item.typeOfNotification == 'info'}">
								<img src='./img/infoIcon.png'>
							</s:elseif>
							<s:else>
								<img src='./img/messageIcon.png'>
							</s:else>
							</span>
						</div>
						<div class="col-md-10">
						${Title_Item}
						<br/>
						 <a style="display:block" href="LoadEventByNotification.do?notificationId=${Notification_Item.notificationId}">
							 ${Notification_Item.content}
							 </a>
						</div>
					</div>
					</div>
					</s:if>
				</s:iterator>
               </s:iterator>
               </s:else>
               
                </div>

                <!-- side right column -->
                <div class="col-md-4 boxContent">
                <jsp:include page="RightSideBarArea.jsp"></jsp:include>
                	<jsp:include page="RightSideBarArea2.jsp"></jsp:include>
                </div>
            </div>
		</div>
	</div>
</body>
</html>